<template>
	<view class="nii_navbar">
		<view class="nii_navbar_wrapper w-100">
			<view :class="containerClasses" :style="containerStyles">
				<view class="nii_navbar_content d-flex align-items-center justify-content-between" :style="contentStyles">
					<view :class="['nii_navbar_back']" style="backStyles" v-if="back">
						<slot name="back">
							<view :class="['back_button', 'text-center']" @click="navigateAction('back')">
								<view class="iconfont icon-fanhui3 fw-bolder nii_navbar_back_item"></view>
							</view>
						</slot>
					</view>
					
					<view :class="['nii_navbar_title', 'text-nowrap']" :style="titleStyles">
						<slot name="title">
						
						</slot>
					</view>
					
					<view :class="['nii_navbar_tools', 'w-fill-available']" :style="toolStyles">
						<slot name="tools">
							<view class="nii_navbar_default_tools justify-content-end align-items-center">
								<view :class="['tool_button', 'text-center', 'section']" @click="navigateAction('index')">
									<view class="niishop fw-bolder nii_navbar_tool_item iconfont icon-home"></view>
								</view>
								<!-- <view :class="['tool_button', 'text-center', 'section']" @click="navigateAction('account.service')">
									<view class="niishop fw-bolder nii_navbar_tool_item iconfont icon-service"></view>
								</view> -->
								<view :class="['tool_button', 'text-center', 'section']" @click="navigateAction('account.invite')">
									<view class="niishop fw-bolder nii_navbar_tool_item iconfont icon-invite"></view>
								</view>
							</view>
						</slot>
					</view>
				</view>
				<slot name="bottom_box">
					
				</slot>
			</view>		
		</view>
	</view>
</template>

<script>
	export default {
		props: ['back', 'globalData', 'fixed', 'alwaysFixed', 'navBg', 'scroll', 'background'],
		options:{styleIsolation: 'share'},
		computed: {
			containerClasses: function () {
				//整理默认样式
				var classes = ['nii_navbar_container', 'd-padding', 'w-fill-available', 'transition_05s'];
				//添加默认样式
				if (this.alwaysFixed) {
					//添加样式
					classes.push('position-fixed top-0 left-0 border_radius_bottom_20');	
				}
				//添加默认样式
				if (this.navBg) {
					//添加样式
					classes.push('nav_bg');
				}
				//判断滑动高度
				if (this.fixed && this.scroll > this.navHeight * 2) {
					//添加默认样式
					!this.navBg && classes.push('nav_bg');
					//判断是否总是显示
					if (!this.alwaysFixed) {
						//添加样式
						classes.push('position-fixed top-0 left-0 border_radius_bottom_20');
					}
				}
				//返回样式
				return classes;
			},
			containerStyles: function () {
				//整理默认样式
				var styles = {
					'padding-top': this.globalData.statusBarHeight+'px',
					'padding-bottom': '20rpx'
				}
				//判断是否设置背景色
				if (this.background) {
					//设置背景色
					styles['background'] = this.background+' !important';
				}
				//返回默认样式
				return this.nii_common.rewriteStyleobject(styles);
			},
			contentStyles: function () {
				//整理默认样式
				var styles = {'height': 'max-content'};
				//判断是否为微信
				// #ifdef MP
					styles = {'height': this.globalData.navigationBarHeight+'px', 'line-height': this.globalData.navigationBarHeight+'px'};
				// #endif
				//返回默认样式
				return this.nii_common.rewriteStyleobject(styles);
			},
			toolStyles: function () {
				//整理默认样式
				var styles = {
					'padding-right': this.globalData.wechatCapsule.width > 0 ? (this.globalData.windowWidth - this.globalData.wechatCapsule.left)+'px' : '0rpx',
			
				}
				//返回默认样式
				return this.nii_common.rewriteStyleobject(styles);
			},
			backStyles: function () {
				//整理默认样式
				var styles = {
					
				}
				//返回默认样式
				return this.nii_common.rewriteStyleobject(styles);
			},
			titleStyles: function () {
				//整理默认样式
				var styles = {
					
				}
				//返回默认样式
				return this.nii_common.rewriteStyleobject(styles);
			}
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {
				//跳转页面
				this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType);	
			},
		},
		mounted() {
			//设置对象
			let that = this;
			//计算高度
			const query = uni.createSelectorQuery().in(that);
			//计算高度
			query.select('.nii_navbar').boundingClientRect(data => {
				//设置高度
				that.navHeight = data.height;
			}).exec();
		}
	}
</script>

<style lang="scss" scoped>
	// 引入项目主题颜色
	@import "@/nii_common/theme.scss";
	//组件样式
	.nii_navbar_wrapper {
		.nii_navbar_container {
			.nii_navbar_title {
				font-size: 40rpx;
				line-height: 48rpx;
				letter-spacing: 1rpx;
				margin-left: 10rpx;
				font-weight: 600;
			}
			.nii_navbar_back {
				.back_button {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 40rpx;
					.nii_navbar_back_item {
						line-height: 40rpx !important;
						font-size: 30rpx;
					}
				}
			}
			.nii_navbar_tools {
				.nii_navbar_default_tools {
					display: none;
					.tool_button {
						margin-right: 10rpx;
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						.nii_navbar_tool_item {
							line-height: 60rpx !important;
							font-size: 40rpx;
						}
					}
					.tool_button:last-child {
						margin-right: 0;
					}
				}
			}
		} 
		.nav_bg {
			.nii_navbar_tools {
				.nii_navbar_default_tools {
					display: flex;
				}
			}
		}
	}
</style>
